<script setup>
import { ref ,onBeforeMount } from 'vue';
import {useGoodsStore,useUserStore} from "@/stores";
import {getGoodsDetail} from "@/api/good";
import {addGoodsToCartService} from "@/api/cart"
import {useRouter} from "vue-router";
import Footer from "@/components/Footer.vue";
import GoodsDrawer from "@/components/GoodsDrawer.vue";

const userStore=useUserStore()
const router = useRouter()

const Num=ref(1)  //加入购物车商品数量

// 获取商品详情
const goodsStore=useGoodsStore()
let goods=ref({})
onBeforeMount(async () => {
  const nowGoodsId = goodsStore.nowGoodsId;
  if (nowGoodsId) {
    try {
      const res = await getGoodsDetail(nowGoodsId);
      goods.value = res.data.data;
    } catch (error) {
      console.error('Error fetching goods details:', error);
    }
  }
});




// 将单个商品对象转换为数组
const goodsArray = ref([goods.value]);

const colors = ref(['黑色', '白色', '蓝色', '红色']); // 商品可选颜色
const selectedColor = ref('黑色'); // 默认选中的颜色
const sizes = ref(['35', '36', '37', '38', '39', '40','41', '42', '43', '44']); // 商品可选尺码
const selectedSize = ref('40'); // 默认选中的尺码

// 加入购物车功能
const addToCart=async (goodsId,userId)=>{
  const res=await addGoodsToCartService(goodsId,Num.value,userId)
  ElMessage({ type: 'success', message: '加入购物车成功' })
  await router.back()
}

//抽屉板块
const drawerVisible=ref()
const OpenDrawer = () => {
  drawerVisible.value.open({})
}

</script>


<template>
<div class="product-detail" style="background-color: #f5f5f5;">
   <!--  图片区 -->
   <div class="image-display">
     <!-- 这里可以使用Element Plus的ElImage组件来展示商品图片 -->
     <el-image
         style="width:300px; height: 300px; max-height: 400px; margin-left: 420px;"
         :src="goods.img"
         fit="cover"
     ></el-image>
   </div>

   <!--  商品区-->
   <div class="goods">
     <div class="goods-introduce">
       <p>{{goods.name}}</p>
       <p>{{goods.info}}</p>
       <p>¥{{goods.price}}</p>
     </div>
      <!--  颜色尺码设置   -->
     <div class="color-selector">
      <!--  商品数量     -->
       <el-input-number min="1" v-model="Num" />
       <h3>选择鞋子颜色</h3>
       <el-radio-group v-model="selectedColor">
         <el-radio
             v-for="color in colors"
             :key="color"
             :label="color"
         >{{ color }}</el-radio>
       </el-radio-group>
     </div>
     <div class="size-selector">
       <h3>选择尺码</h3>
       <el-select v-model="selectedSize" placeholder="请选择">
         <el-option
             v-for="size in sizes"
             :key="size"
             :label="size"
             :value="size"
         ></el-option>
       </el-select>
     </div>

     <div class="actions">
       <el-button type="primary" @click="addToCart(goods.id,userStore.userid)">加入购物车</el-button>
       <el-button @click="OpenDrawer">立即购买</el-button>
     </div>
   </div>

    <!--商品评论区 -->
    <div class="comments-section">
      <h2>商品评论区</h2>
      <el-card class="comment-card">
        <div class="comment">
          <p><strong>用户A：</strong> 鞋子很舒服，尺码也很合适。</p>
        </div>
        <div class="comment">
          <p><strong>用户B：</strong> 颜色很正，非常喜欢！</p>
        </div>
        <!-- 这里可以添加更多的评论 -->
      </el-card>
    </div>
</div>

  <Footer></Footer>

  <!--  抽屉板块--->
  <goods-drawer ref="drawerVisible"  :goods-list="goodsArray"></goods-drawer>
</template>


<style scoped>
.product-detail {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f5f5;
}

.image-display {
  flex: 1;
  margin-right: 20px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.goods {
  width: 60%;
  margin-left: 15%;
  text-align: center;
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.size-selector{
  width: 300px;
  margin-left: 220px;
}

.goods-introduce p {
  font-size: 18px;
  color: #333;
  font-weight: 400;
}

.color-selector h3,
.size-selector h3 {
  font-size: 16px;
  color: #555;
  font-weight: 500;
  margin-bottom: 2px;
}

.el-button {
  font-size: 16px;
  font-weight: 500;
}

.comments-section {
  margin-top: 40px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}


/* Apply Roboto font to the body */
body {
  font-family: 'Roboto', sans-serif;
}
</style>
